<template>
	<view class="content">
		<view class="contanct">
			<template v-if="items.type==0">
				<view class="qrcode">
					<qrcode
					:val="items.htx"
					:size="100"
					:lv="3" 
					:onval="true"
					:loadMake="true"
					></qrcode>
				</view>
			</template>
			<view class="title">
				<view class="">
					{{items.title_en}}{{items.type==0? i18n.recharge:i18n.withdrawal}}
				</view>
				<text :class="items.status==3?'red':items.status==1?'green':'gray'">{{items.status==3?((items.type==0?i18n.recharge:i18n.withdrawal) + i18n.success):items.status==1?i18n.underReview:i18n.turnDown}}</text>
			</view>
			<view class="item">
				<view class="">
					{{items.type==0?i18n.recharge: i18n.withdrawal}}{{i18n.Amount}}({{items.title_en}}):{{items.number}}
				</view>
				<view class="" v-if="items.type==0">
					{{i18n.hxAddress}}:<text>{{items.htx}}</text>
				</view>
				<view class="">
					{{items.type==0?i18n.recharge:i18n.withdrawal}}{{i18n.time}}:{{items.create_time}}
				</view>
				<view class="" v-if="items.type==1">
					{{i18n.fromAddress}}:
					<text>{{items.from}}</text>
				</view>
				<view class="">
					{{items.type==0?i18n.recharge: i18n.withdrawal}}{{i18n.address}}:
					<text>{{items.to}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Qrcode from "../../components/qrcode/qrcode.vue"
	export default {
		components:{
			Qrcode
		},
		computed:  {
			i18n() {
				return this.$t('message');
			}
		},
		data() {
			return {
				items:''
			}
		},
		onLoad(e) {
			this.items = JSON.parse(e.item);
		},
		methods:{
		}
	}
</script>
<style>
	page{
		background: #eff3f7;
	}
</style>
<style lang="scss" scoped>
	.content{
		padding:0 30upx;
		.contanct{
			margin-top: 30upx;
			padding: 48upx 15upx;
			background-color: #FFFFFF;
			border-radius: 10upx;
			position: relative;
			.qrcode{
				position: absolute;
				right: 20upx;
				top: 200upx;
				image{
					width: 100upx;
					height: 100upx;
				}
			}
			.title{
				display: flex;
				justify-content: space-between;
				line-height: 60upx;
				border-bottom: 2upx solid rgb(222, 225, 229);
				padding-bottom: 20upx;
				view{
					font-weight: bold;
				}
				text{
					&.green{
						color: #1aa034;
					}
					&.red{
						color: #FF691A;
					}
					&.gray{
						color: gray;
					}
				}
			}
			.item{
				padding-top: 30upx;
				>view{
					margin-bottom: 20upx;
					font-size:22upx;
					color: #7B7B7B;
					text{
						font-size:24upx;
						color: #272727;
						display: block;
						width: 70%;
						word-wrap: break-word;
					}
				}
			}
		}
	}
</style>
